<template>
  <div class="brand-wrapper">
    <div class="content">
      <div class="top">
        <div class="title-wrapper">
          <Input placeholder="请输入品牌名称" @search="hanldeSearch" />
        </div>
        <el-button @click="add">添加</el-button>
      </div>
      <div class="bottom">
        <el-table :data="brandList" style="width: 100%" :height="height">
          <el-table-column label="商家" width="180">
            <template slot-scope="scope">
              <div class="d-flex">
                <div style="margin-right: 20px">
                  <el-avatar shape="square" :size="70" :src="scope.row.cover" />
                </div>
                <span>{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="联系方式" width="180">
            <template slot-scope="scope">
              <div v-for="(item, index) of scope.row.information" :key="index">{{ item.tel }}</div>
            </template>
          </el-table-column>
          <el-table-column label="地址">
            <template slot-scope="scope">
              <div
                v-for="(item, index) of scope.row.information"
                :key="index"
              >{{ item.shop_address }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="核销口令" width="200">
            <template slot-scope="scope">
              <div v-for="(item, index) of scope.row.information" :key="index"><span  v-show="item.code">{{item.shop_id == '1' ? '全球家居1号店' :  '欧丽洛雅吴中路商场'}} </span><span v-show="item.code"> / </span> {{ item.code }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="注册时间" />
          <el-table-column label="排序">
            <template slot-scope="scope">
              <div>
                <el-input v-model="scope.row.sort" size="medium" style="width: 50px" @blur="hanldeSortBlur(scope)" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center"  fixed="right">
            <template slot-scope="scope">
              <div>
                <span class="col-blue" style="white-space: nowrap" @click="checkStatics(scope)">查看资料</span>
                <span v-if="!scope.row.disable" class="col-blue" style="white-space: nowrap" @click="activeClick(scope)">启用</span>
                <span v-else class="col-red" style="white-space: nowrap" @click="activeClick(scope)">禁用</span>
                <!-- <span class="col-red">禁用</span> -->
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <Pagination
      class="pagination"
      :total="total"
      :cur-page="currentPage"
      @nextPage="handleNextPage"
    />
  </div>
</template>
<script>
import Input from '@/common/input'
import Pagination from '@/common/pagination'
import Resize from '@/common/mixins/resize'
import { getBrandList, setActive, brandSort } from '@/api/http/brand'
const ERR_OK = 200
export default {
  components: {
    Input,
    Pagination
  },
  mixins: [Resize],
  data() {
    return {
      defaultHeight: 280,
      query: '',
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          squareUrl:
            'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
        }
      ],
      brandList: null,
      total: 0,
      currentPage: 1
    }
  },
  created() {
    this._getBrandList({ page: this.currentPage })
  },
  methods: {
    hanldeSortBlur(scope) {
      brandSort(scope.row)
        .then(res => {
          if (res.code === ERR_OK) {
            this.$message({
              message: '排序成功',
              showClose: true,
              type: 'success'
            })
            this._getBrandList({ page: this.currentPage, keywords: this.query })
          }
        })
    },
    activeClick(scope) {
      this._setActive(scope.row.id)
        .then(res => {
          if (res.code === ERR_OK) {
            this._getBrandList({ page: this.currentPage, keywords: this.query })
          }
        })
    },
    checkStatics(scope) {
      this.$router.push({
        path: '/brand/brand-setting',
        query: { detail: scope.row }
      })
    },
    hanldeSearch(query) {
      this.query = query
      this.currentPage = 1
      this._getBrandList({ page: this.currentPage, keywords: this.query })
    },
    add() {
      this.$router.push({ path: '/brand/brand-setting' })
    },
    handleNextPage(page) {
      this.currentPage = page
      this._getBrandList({ page: this.currentPage, keywords: this.query })
    },
    _getBrandList({ page, keywords }) {
      getBrandList({ page, keywords })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.brandList = res.data.data
            this.total = res.data.total
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _setActive(id) {
      return setActive(id)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: '操作成功'
            })
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import "@/styles/el-table.scss";
@import "@/styles/color.scss";
@import "@/styles/el-pagination.scss";
.content {
  .top {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    .title-wrapper {
      display: flex;
      align-content: center;
      .title {
        height: 44px;
        line-height: 44px;
        color: rgba(68, 68, 68, 1);
        font-size: 18px;
        font-family: Roboto;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
}
.d-flex {
  display: flex;
  align-items: center;
}
</style>
